<template>
	<div id="schedule-log">
		<el-form :inline="true" :model="query" size="mini" class="query-box" ref="queryForm">
			<el-form-item style="width: 120px;" prop="ids">
				<el-select v-model="select_ids" multiple collapse-tags placeholder="任务id" :loading="isLoading" clearable @focus="getScheduleLogJobIds">
					<el-option v-for="(item,index) in jobIds" :label="item" :key="index" :value="item"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<date-time-range-picker v-model="query" ref="dataTimeRangePicker"></date-time-range-picker>
			</el-form-item>
			<el-form-item style="width: 80px;" prop="status">
				<el-select v-model="query.status" placeholder="状态" clearable>
					<el-option label="全部" value=""></el-option>
					<el-option label="正常" value="1"></el-option>
					<el-option label="异常" value="0"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getData(pager.pageNum,pager.pageSize)">查询</el-button>
				<el-button @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="arr" style="width: 100%" border>
			<!-- 展开开始 -->
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-descriptions title="日志详情" class="details" border>
						<el-descriptions-item label="id">{{props.row.logId}}</el-descriptions-item>
						<el-descriptions-item label="任务id">{{props.row.jobId}}</el-descriptions-item>
						<el-descriptions-item label="任务时间">{{props.row.createTime | DF}}</el-descriptions-item>
						<el-descriptions-item label="耗时">
							<el-tag>{{props.row.times}}ms</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="执行结果">
							<el-tag type="success" v-if="props.row.status">正常</el-tag>
							<el-tag type="warning" v-else>异常</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="返回值">{{props.row.result}}</el-descriptions-item>
						<el-descriptions-item label="过程描述">
							<el-input type="textarea" :value="props.row.desc" :autosize="{ minRows: 7, maxRows: 7}"
								resize="none" readonly></el-input>
						</el-descriptions-item>

					</el-descriptions>
				</template>
			</el-table-column>
			<!-- 展开结束 -->
			<el-table-column prop="logId" label="id" align="center" width="100">
			</el-table-column>
			<el-table-column prop="jobId" label="任务id" align="center" width="100">
			</el-table-column>
			<el-table-column label="状态" width="140" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.status" disable-transitions>正常</el-tag>
					<el-tag type="warning" v-else disable-transitions>异常</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="耗时" width="100" align="center">
				<template slot-scope="scope">
					<el-tag>{{scope.row.times}}ms</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="返回值" align="center">
				<template slot-scope="scope">
					<el-tooltip v-if="scope.row.result" effect="dark" :content="scope.row.result" placement="top">
						<div class="result">{{scope.row.result}}</div>
					</el-tooltip>
					<el-tag type="info" v-else disable-transitions>无</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="执行时间" width="200" align="center">
				<template slot-scope="scope">
					{{scope.row.createTime | DF}}
					</el-switch>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-model="pager" @change="getData"></pagination>
	</div>
</template>

<script>
	import {
		getScheduleLogList,
		getScheduleLogJobIds
	} from '@/api/schedule.js'
	import {
		parseTime
	} from '@/utils/index.js'
	import pagination from '@/components/common/Pagination.vue'
	import dateTimeRangePicker from '@/components/common/DateTimeRangePicker.vue'
	export default {
		name: 'ScheduleLog',
		created() {
			this.getData(1, this.getDefaultPageSize())
		},
		methods: {
			getData(page, pageSize) {
				this.saveDefaultPageSize(pageSize)
				this.query.ids=this.select_ids.join()
				getScheduleLogList(page, pageSize, this.query).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.arr = res.data.list
						this.pager = res.data
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			resetQuery() {
				this.$refs['queryForm'].resetFields()
				this.query.startTime = ''
				this.query.endTime = ''
				this.$refs['dataTimeRangePicker'].reset()
				this.getData(this.pager.pageNum, this.pager.pageSize)
			},
			getScheduleLogJobIds() {
				if(this.jobIds.length!==0||this.isLoading) return
				this.isLoading=true
				getScheduleLogJobIds().then(res=>{
					this.isLoading=false
					if(res.code==200){
						this.jobIds=res.data
					}else{
						console.log(res)
						this.$message.error(res.data)
					}
					
				})
			},
			getDefaultPageSize(){
				let v=window.localStorage.getItem("logPageSize")
				if(v==null||isNaN(v)) return 8
				return parseInt(v)
			},
			saveDefaultPageSize(pageSize){
				window.localStorage.setItem("logPageSize",pageSize)
			}
		},
		data() {
			return {
				arr: [],
				pager: {},
				jobIds: [],
				select_ids:[],
				query: {
					startTime: '',
					endTime: '',
					status: '',
					ids:''
				},
				isLoading:false
			}
		},
		filters: {
			DF(t) {
				return parseTime(t)
			}
		},
		components: {
			pagination,
			dateTimeRangePicker
		}
	}
</script>

<style lang="scss">
	#schedule-log {
		width: 100%;
	}
</style>
